<template>
  <el-container>
    <el-header>
      <span>concise-account-book 记账本</span>
    </el-header>

    <el-container>
      <el-aside>
        <el-menu>
          <router-link
            :to="{ name: 'dataManage', params: { totalUsersAmount: 3 } }"
          >
            <el-menu-item index="1">
              <span slot="title"> <i class="el-icon-s-data"></i>数据管理 </span>
            </el-menu-item>
          </router-link>

          <el-submenu index="2">
            <template>
              <span slot="title"  class="systemManage-box"
                ><i
                  class="el-icon-s-custom"
                  style="font-size: 20  px;"
                  
                ></i
                >系统管理</span
              ></template
            >

            <router-link to="/admins/users">
              <el-menu-item index="1-1">
                <i class="el-icon-search"></i>用户管理
              </el-menu-item>
            </router-link>

            <router-link to="/admins/categories">
              <el-menu-item index="1-2">
                <i class="el-icon-edit"></i>分类管理
              </el-menu-item>
            </router-link>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {};
</script>

<style>
.el-container {
  height: 100%;
}

.el-header {
  background-color: rgb(36, 36, 36);
  color: rgb(240, 231, 231);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 25px;
}

.el-aside {
  background-color: #f8f1d3;
  color: rgb(182, 172, 172);
  text-align: center;
  width: 200px;
  height: 660px;
  font-size: 20px;
}

.el-main {
  background-color: #f0f0e4;
  color: rgb(151, 144, 144);
  height: 660px;
}
.el-submenu,
.el-menu-item {
  background: #f5f4ec;
  color: rgb(197, 191, 191);
  font-size: 20px;
}

.router-link-active {
  text-decoration: none;
}
a {
  text-decoration: none;
}
.systemManage-box {
  font-size: 20px;
  color: rgb(194, 193, 193);
}
</style>